<template>
  <div class="goods_count">
    <!-- <div class="menu-count">
      <div class="user-menu user-wrapper acea-row row-middle">
        <div class="menu-main acea-row row-middle">
        </div>
      </div>
    </div> -->
    <div class="goods-detail wrapper_1200">
      <div class="acea-row page_container">
        <div class="goods-main">
          <div class="acea-row row-top" style="position: relative">
            <div>
              <div class="carousel">
                <el-image
                  :src="productInfo.sliderImage"
                  class="preview normal_border"
                  fit="scale-down"
                >
                  <div slot="placeholder" class="image-slot">
                    loading<span class="dot">...</span>
                  </div>
                </el-image>
                <client-only>
                  <div v-swiper:carousel="swiperOption">
                    <div class="swiper-wrapper">
                      <div
                        v-for="(item, index) in productInfo.sliderImage.split(',')"
                        :key="index"
                        :class="{ on: slideIndex === index }"
                        class="swiper-slide"
                        @mouseover="swiperMouseover(index)"
                      >
                        <el-image
                          :src="item"
                          fit="scale-down"
                          class="normal_border"
                        >
                          <div slot="placeholder" class="image-slot">
                            loading<span class="dot">...</span>
                          </div>
                        </el-image>
                      </div>
                    </div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                    <div class="swiper-button-next swiper-button-white"></div>
                  </div>
                </client-only>
              </div>
              <div class="float_left_show">
                <div class="store_show normal_border">
                  <div class="store_header">
                    <el-image
                      :src="merchantInfo.avatar"
                      class="store_image normal_border"
                      fit="scale-down"
                    >
                      <div slot="placeholder" class="image-slot">
                        loading<span class="dot">...</span>
                      </div>
                    </el-image>
                    <div class="store_info">
                      <div class="store_name">
                        {{ merchantInfo.name }}
                      </div>
                      <div class="store_code">
                        {{ merchantInfo.code }}
                      </div>
                      <div class="store_rate">
                        <span
                          :class="
                            'iconfont2 ic-pingfen ' +
                            (merchantInfo.starLevel >= 1 ? 'full' : 'none')
                          "
                        ></span>
                        <span
                          :class="
                            'iconfont2 ic-pingfen ' +
                            (merchantInfo.starLevel >= 2 ? 'full' : 'none')
                          "
                        ></span>
                        <span
                          :class="
                            'iconfont2 ic-pingfen ' +
                            (merchantInfo.starLevel >= 3 ? 'full' : 'none')
                          "
                        ></span>
                        <span
                          :class="
                            'iconfont2 ic-pingfen ' +
                            (merchantInfo.starLevel >= 4 ? 'full' : 'none')
                          "
                        ></span>
                        <span
                          :class="
                            'iconfont2 ic-pingfen ' +
                            (merchantInfo.starLevel >= 5 ? 'full' : 'none')
                          "
                        ></span>
                      </div>
                      <!-- <el-rate
                          v-model="merchantInfo.starLevel"
                          disabled
                          :icon-classes="['iconfont2 ic-xuanzhongzhuangtai2']"
                          score-template="{value}">
                        </el-rate> -->
                    </div>
                  </div>
                  <div class="store_tag">
                    <div v-if="merchantInfo.isSelf" class="tag">
                      {{ $t(`page.store.selfSupport`) }}
                    </div>
                    <div class="tag">
                      {{ merchantInfo.typeId | merchantTypeFilter }}
                    </div>
                  </div>
                  <div class="store_function">
                    <div
                      class="store_customer"
                      @click="call"
                      style="cursor: pointer"
                    >
                      <span class="iconfont2 ic-kefu icon"></span>
                      <span class="text">{{
                        $t(`page.store.storeService`)
                      }}</span>
                      <span class="iconfont icon-gengduo arrow"></span>
                    </div>
                    <nuxt-link
                      class="desc"
                      :to="{
                        path: '/merchant/merchant/qualification',
                        query: { id: merId },
                      }"
                    >
                      <div class="store_qualification">
                        <span class="iconfont2 ic-qiyezizhi icon"></span>
                        <span class="text">{{
                          $t(`page.store.storeQualification`)
                        }}</span>
                        <span class="iconfont icon-gengduo arrow"></span>
                      </div>
                    </nuxt-link>
                  </div>
                  <div class="store_link">
                    <el-button @click="followToggle(merId)">
                      <span
                        :class="
                          merchantInfo.isCollect
                            ? 'iconfont2 icon ic-yishoucang iconPrimary '
                            : 'iconfont2 icon ic-shoucang iconInfo'
                        "
                        style="margin-right: 10px"
                      ></span>
                      <span class="text">
                        {{
                          merchantInfo.isCollect
                            ? $t(`page.store.followed`)
                            : $t(`page.store.follow`)
                        }}</span
                      >
                    </el-button>
                    <el-button @click="goStore">
                      <span
                        class="iconfont2 ic-dianpu icon iconInfo"
                        style="margin-right: 10px"
                      ></span>
                      <span class="text">{{ $t(`page.goodsSearch.mer`) }}</span>
                    </el-button>
                  </div>
                </div>
                <div
                  class="recommend_show"
                  v-if="goodsList && goodsList.length"
                >
                  <nuxt-link
                    v-for="(item, index) in goodsList"
                    :key="index"
                    :to="`/goods_detail/${item.id}`"
                    class="item"
                  >
                    <div class="inner">
                      <el-image
                        :src="item.image"
                        class="recommend_image normal_border"
                        fit="scale-down"
                      >
                        <div slot="placeholder" class="image-slot">
                          loading<span class="dot">...</span>
                        </div>
                      </el-image>
                      <div class="name">{{ item.storeName }}</div>
                      <statistic
                        class="price"
                        :value="item.price"
                        :currency="item.currency"
                      />
                    </div>
                  </nuxt-link>
                </div>
              </div>
            </div>
            <div style="width: 756px">
              <div class="text-wrapper">
                <div class="title_view">
                  <div class="title">{{ productInfo.storeName }}</div>
                  <div class="extra">
                    {{ $t(`page.goodsDetail.sales`) }}： &nbsp;{{
                      Math.floor(productInfo.sales) +
                        Math.floor(productInfo.ficti) || 0
                    }}
                  </div>
                </div>
                <div class="money_show">
                  <span class="price_label"
                    >{{ $t(`page.goodsList.price`) }}： &nbsp;</span
                  >
                  <span>
                    <statistic
                      :value="
                        attrValueSelected
                          ? attrValueSelected.price
                          : productInfo.price
                      "
                      :currency="productInfo.currency"
                    />
                  </span>
                  <del>
                    <statistic
                      :valueStyle="{
                        color: '#9A9EA7',
                        textDecoration: 'line-through',
                      }"
                      style="margin-left: 15px"
                      :value="
                        attrValueSelected
                          ? attrValueSelected.otPrice
                          : productInfo.otPrice
                      "
                      :currency="productInfo.currency"
                    />
                  </del>
                  <div class="specifications"></div>
                </div>

                <div class="attr_show">
                  <div
                    v-for="(item, index) in productAttr"
                    :key="index"
                    class="attr_view"
                  >
                    <div class="label">
                      {{ filterText(item.attrName) }}： &nbsp;
                    </div>
                    <el-radio-group
                      class="elradio_group"
                      v-model="attrSelected[index]"
                      size="small"
                    >
                      <el-radio
                        v-for="(itm, idx) in item.attrValues.split(',')"
                        :key="idx"
                        class="item"
                        :label="itm"
                        border
                        :name="itm"
                        >{{ filterText(itm) }}
                        <div
                          v-show="attrSelected[index] == itm"
                          class="itemicon iconfont2 ic-xuanzhongzhuangtai2"
                        ></div>
                      </el-radio>
                    </el-radio-group>
                  </div>
                </div>
                <div class="number_show">
                  <div class="label">
                    {{ $t(`page.goodsDetail.num`) }}： &nbsp;
                  </div>
                  <div class="input_number">
                    <el-input-number
                      class="elinput_number"
                      v-model="count"
                      :step="1"
                      :disabled="!stock"
                      :min="productInfo.minQty"
                      :max="stock"
                      step-strictly
                    ></el-input-number>
                    <div class="note">
                      <span>
                        {{ $t(`page.goodsDetail.inventory`) }}：{{ stock || 0 }}
                        &nbsp;
                        <!-- {{ productInfo.unitName || "" }} -->
                        {{ $t("unit") }}
                      </span>
                      &nbsp; &nbsp;
                      <span v-if="productInfo.minQty > 1">
                        {{ $t(`page.goodsDetail.minQty`) }}：
                        {{ productInfo.minQty || 1 }}&nbsp;
                        <!-- {{ productInfo.unitName || "" }} -->
                        {{ $t("unit") }}
                      </span>
                    </div>
                  </div>
                </div>

                <div class="guarantee_show" v-if="guaranteeList.length">
                  <div class="label">
                    {{ $t(`page.goodsDetail.assure`) }}： &nbsp;
                  </div>
                  <!-- <div class="guarantee_view">
                  <div class="item" v-for="item in guaranteeList" :key="item.id">
                    <span class="iconfont2 ic-baozhang" style="margin-right: 8px;"></span>{{ item.name ? item.name : '' }}
                  </div>

                </div> -->
                  <el-popover
                    placement="bottom-start"
                    width="600"
                    trigger="hover"
                  >
                    <div class="content">
                      <div
                        v-for="item in guaranteeList"
                        class="guarantee_tip_item"
                        :key="item.id"
                      >
                        <div class="name">
                          <span
                            class="iconfont2 ic-baozhang icon"
                            style="margin-right: 5px"
                          ></span
                          >{{ item.name }}
                        </div>
                        <div class="info" style="white-space: pre-line">
                          {{ item.content }}
                        </div>
                      </div>
                    </div>
                    <div class="guarantee_view" slot="reference">
                      <div
                        class="item"
                        v-for="item in guaranteeList"
                        :key="item.id"
                      >
                        <span
                          class="iconfont2 ic-baozhang"
                          style="margin-right: 8px"
                        ></span
                        >{{ item.name ? item.name : "" }}
                      </div>
                    </div>
                  </el-popover>
                </div>
                <div class="button_show">
                  <el-button @click="collect">
                    <span
                      :class="
                        userCollect
                          ? 'iconfont2 icon ic-yishoucang iconPrimary '
                          : 'iconfont2 icon ic-shoucang iconInfo'
                      "
                    ></span>
                  </el-button>
                  <template v-if="stock && productInfo.minQty <= stock">
                    <el-button
                      class="normal"
                      :disabled="!stock"
                      @click="buy(1, $event)"
                    >
                      <span
                        class="iconfont2 ic-gouwuche icon"
                        style="margin-right: 8px"
                      ></span>
                      <span>{{ $t(`page.goodsDetail.addCart`) }}</span>
                    </el-button>
                    <el-button
                      type="primary"
                      :loading="loading"
                      :disabled="!stock"
                      @click="buy(0, $event)"
                    >
                      <span> {{ $t(`page.goodsDetail.buyNow`) }}</span>
                    </el-button>
                  </template>
                  <el-button v-else disabled
                    ><span>{{
                      $t(`page.goodsDetail.soldOut`)
                    }}</span></el-button
                  >
                </div>
                <!-- <div class="acea-row row-middle">
                <div class="btn" style="width:60px" @click="collect">
                <span
                  :class="[
                    'iconfont',
                    userCollect ? 'icon-xihuan1' : 'icon-xihuan'
                  ]"
                ></span
                >{{ userCollect ? $t(`page.store.followed`) : $t(`page.store.follow`) }}
                </div>
              </div> -->
                <!-- <div class="button-wrapper" v-if="stock&&productInfo.minQty<=stock">
                <button
                  class="btn cart"
                  :disabled="!stock"
                  @click="buy(1, $event)"
                >
                  {{$t(`page.goodsDetail.addCart`)}}
                </button>
                <button class="btn" :loading="loading" :disabled="!stock" @click="buy(0, $event)">
                  {{$t(`page.goodsDetail.buyNow`)}}
                </button>
              </div>
              <div class="button-wrapper" v-else>
                <button class="btn btn-out" disabled>{{$t(`page.goodsDetail.soldOut`)}}</button>
              </div> -->

                <!-- <div class="money-wrapper acea-row">
                <div class="priceBox">
                  <div class="acea-row row-middle mb22">
                    <div class="prict-title">{{$t(`page.goodsList.price`)}}</div>
                    <div class="price">
                      <span><statistic :value="attrValueSelected
                          ? attrValueSelected.price
                          : productInfo.price" :currency="productInfo.currency"/></span>
                    </div>
                    <div class="money-wrap">
                      <del>
                        <statistic :valueStyle="{color:'#999',textDecoration:'line-through'}" :value="attrValueSelected
                        ? attrValueSelected.otPrice
                        : productInfo.otPrice" :currency="productInfo.currency"/>
                      </del>
                      <div class="acea-row row-middle">

                      </div>
                    </div>
                  </div>
                  <div class="acea-row row-middle" v-if="couponList.length>0">
                    <div class="prict-title">{{$t(`page.goodsDetail.coupons`)}}</div>
                    <div class="acea-row row-between dropdown-box" style="width: 496px;">
                      <div class="coupons-box acea-row">
                        <div class="activity" v-for="item in couponList" :key="item.id">
                          <statistic :valueStyle="{color:'#fff'}" :value="item.money" :currency="item.currency"/>
                        </div>
                      </div>
                      <el-dropdown style="z-index: 10">
                        <div class="coupons-get cursors">
                          {{$t(`page.users.userCoupon.receive`)}}
                          <i class="el-icon-arrow-down el-icon--right"></i>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                          <div class="coupon_list">
                            <coupon :couponList="couponList"></coupon>
                          </div>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                </div>
                <div class="saleBox acea-row row-center-wrapper">
                  <el-divider direction="vertical"></el-divider>
                  <div class="sales acea-row row-column row-center-wrapper">
                    <div class="num">
                      {{Math.floor(productInfo.sales) + Math.floor(productInfo.ficti) || 0}}
                    </div>
                    <div>{{$t(`page.goodsDetail.sales`)}}</div>
                  </div>
                </div>
              </div>
              <div class="attribute">
                <div
                  v-for="(item, index) in productAttr"
                  :key="index"
                  class="acea-row size-wrapper"
                >
                  <div class="label">{{ item.attrName }}</div>
                  <div class="acea-row list">
                    <label
                      v-for="(itm, idx) in item.attrValues.split(',')"
                      :key="idx"
                      class="item"
                    >
                      <input
                        v-model="attrSelected[index]"
                        @input="test"
                        type="radio"
                        :name="index"
                        :value="itm"
                        :checked="!idx"
                        hidden
                      />
                      <div class="acea-row cont">
                        <div class="acea-row row-middle name">{{ itm }}</div>
                        <div class="iconfont icon-xuanzhong4"></div>
                      </div>
                    </label>
                  </div>
                </div>
              </div>
              <div class="number-wrapper acea-row">
                <div class="label">{{$t(`page.goodsDetail.num`)}}</div>
                <div class="counter-wrap acea-row">
                  <div class="counter">
                    <button
                      class="iconfont icon-shangpinshuliang-jian"
                      :disabled="count <= productInfo.minQty || !stock"
                      @click="minus"
                    >—</button>
                    <input v-model="count" @input="inputNum"/>
                    <button
                      style="font-size: 20px;"
                      class="iconfont icon-shangpinshuliang-jia"
                      :disabled="count >= stock || !stock"
                      @click="plus"
                    >+</button>
                  </div>
                  <span>{{$t(`page.goodsDetail.inventory`)}}：{{stock || 0}}{{productInfo.unitName || ''}}</span>
                  <span v-if="productInfo.minQty>1">{{$t(`page.goodsDetail.minQty`)}}：{{productInfo.minQty || 1}}{{productInfo.unitName || ''}}</span>
                </div>
              </div>
              <div class="button-wrapper" v-if="stock&&productInfo.minQty<=stock">
                <button
                  class="btn cart"
                  :disabled="!stock"
                  @click="buy(1, $event)"
                >
                  {{$t(`page.goodsDetail.addCart`)}}
                </button>
                <button class="btn" :loading="loading" :disabled="!stock" @click="buy(0, $event)">
                  {{$t(`page.goodsDetail.buyNow`)}}
                </button>
              </div>
              <div class="button-wrapper" v-else>
                <button class="btn btn-out" disabled>{{$t(`page.goodsDetail.soldOut`)}}</button>
              </div> -->
                <!-- <div v-if="guaranteeList.length" class="number-wrapper acea-row guaranteeList">
                <div class="label" @mouseover="guaranteeTitle = true" @mouseleave="guaranteeTitle = false">
                  {{ $t(`page.goodsDetail.assure`) }} <span class="iconfont icon-duoshanghupc-shuomingdanchuang"></span>
                </div>
                <div class="guaranee_tel" :style="{ display: (guaranteeTitle || guaranteeInfo) ? 'block' : 'none' }"
                  @mouseover="guaranteeInfo = true" @mouseleave="guaranteeInfo = false">
                  <div class="content">
                    <div v-for="item in guaranteeList" class="item" :key="item.id">
                      <div class="name">{{ item.name }}</div>
                      <div class="info" style="white-space: pre-line;">{{ item.content }}</div>
                    </div>
                  </div>
                </div>
                <div class="guaranteeAttr">
                  <div class="atterTxt1" v-for="item in guaranteeList" :key="item.id">
                    <span class="iconfont icon-gou"></span>{{ item.name ? item.name : '' }}
                  </div>
                </div>
              </div> -->
              </div>
              <div class="detail_show">
                <el-tabs v-model="activeName" class="detail_tab">
                  <el-tab-pane
                    :label="$t(`page.goodsDetail.navList[3].name`)"
                    name="0"
                  >
                    <div v-if="productInfo.content" class="detail-html">
                      <div v-html="productInfo.content"></div>
                    </div>
                    <div v-else class="nothing">
                      <img src="@/assets/images/noDetail.png" />
                      <div>{{ $t(`message.tips.noDetal`) }}</div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane
                    :label="
                      $t(`page.goodsDetail.Reviews`) + `(${replyInfo.sumCount})`
                    "
                    name="1"
                  >
                    <div class="comment_show">
                      <div class="comment_rate">
                        <span>
                          {{ $t(`page.users.goodsCommentList.score`) }}</span
                        >
                        <div class="rate">
                          <span
                            :class="
                              'iconfont2 ic-pingfen ' +
                              (replyInfo.replyStar >= 1 ? 'full' : 'none')
                            "
                          ></span>
                          <span
                            :class="
                              'iconfont2 ic-pingfen ' +
                              (replyInfo.replyStar >= 2 ? 'full' : 'none')
                            "
                          ></span>
                          <span
                            :class="
                              'iconfont2 ic-pingfen ' +
                              (replyInfo.replyStar >= 3 ? 'full' : 'none')
                            "
                          ></span>
                          <span
                            :class="
                              'iconfont2 ic-pingfen ' +
                              (replyInfo.replyStar >= 4 ? 'full' : 'none')
                            "
                          ></span>
                          <span
                            :class="
                              'iconfont2 ic-pingfen ' +
                              (replyInfo.replyStar >= 5 ? 'full' : 'none')
                            "
                          ></span>
                        </div>
                        <div class="percentage">
                          <span
                            >{{ $t(`page.users.goodsCommentList.good`) }}
                            {{ replyInfo.replyChance * 100 }}%</span
                          >
                        </div>
                      </div>

                      <div class="comment_view">
                        <el-radio-group
                          class="elradio_group"
                          v-model="reply.type"
                          size="small"
                          @change="(e) => replyTypeChange(e)"
                        >
                          <el-radio label="0" border>
                            {{ $t(`page.users.goodsCommentList.all`) }}({{
                              replyInfo.sumCount
                            }})</el-radio
                          >
                          <el-radio label="1" border
                            >{{
                              $t(`page.users.goodsCommentList.goodScore`)
                            }}({{ replyInfo.goodCount }})</el-radio
                          >
                          <el-radio label="2" border>
                            {{ $t(`page.users.goodsCommentList.general`) }}({{
                              replyInfo.inCount
                            }})</el-radio
                          >
                          <el-radio label="3" border>
                            {{ $t(`page.users.goodsCommentList.bad`) }}({{
                              replyInfo.poorCount
                            }})</el-radio
                          >
                        </el-radio-group>
                        <template v-if="replyList.length > 0">
                          <div class="comment_list">
                            <div
                              class="commend_item"
                              v-for="item in replyList"
                              :key="item.reply_id"
                            >
                              <div class="image">
                                <el-image
                                  :src="item.avatar || '~assets/images/f.png'"
                                  class="commend_item_image normal_border"
                                  fit="scale-down"
                                >
                                </el-image>
                              </div>
                              <div class="commend_item_info">
                                <div class="commend_item_rate">
                                  <span
                                    class="iconfont2 ic-pingfen full icon"
                                  ></span>
                                  <span class="star"> {{ item.star }}</span>
                                  <span class="time">{{
                                    item.createTime
                                  }}</span>
                                </div>
                                <div class="name">{{ item.nickname }}</div>
                                <div class="comment">{{ item.comment }}</div>
                                <div
                                  class="images"
                                  v-if="
                                    item.pics &&
                                    item.pics.length &&
                                    item.pics[0]
                                  "
                                >
                                  <el-image
                                    style="width: 54px; height: 54px"
                                    :src="itm"
                                    class="normal_border image"
                                    v-for="(itm, idx) in item.pics"
                                    :key="idx"
                                    @click="isDialog = true"
                                    :preview-src-list="item.pics"
                                  ></el-image>
                                </div>
                                <div
                                  v-if="item.merchantReplyContent"
                                  class="reply"
                                >
                                  <div class="item">
                                    <span
                                      >{{
                                        $t(
                                          `page.users.goodsCommentList.seller`
                                        )
                                      }}：</span
                                    >{{ item.merchantReplyContent }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="page">
                            <el-pagination
                              background
                              layout=" pager, next"
                              :page-size="reply.limit"
                              :total="replyCount"
                              @current-change="callPaginate"
                              @prev-click="callPaginate"
                              @next-click="callPaginate"
                            ></el-pagination>
                          </div>
                        </template>
                        <div class="empty-box" v-else-if="replyList.length < 0">
                          <img src="~assets/images/noEvaluate.png" alt="" />
                          <p>{{ $t(`message.tips.noEvaluation`) }}</p>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
          <div class="bottom_show"></div>
        </div>
      </div>
    </div>
    <float-window></float-window>
  </div>
</template>

<script>
import {
  getPreOrder,
  followPro,
  followMer,
  goMerchant,
} from "@/utils/order.js";
import { Debounce } from "@/utils/validate.js";
import coupon from "@/components/coupon";
import FloatWindow from "../../../components/floatWindow";
export default {
  name: "index",
  auth: false,
  data() {
    return {
      activeName: "0",
      loading: false,
      swiperOption: {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        slidesPerView: "auto",
        observer: true,
        observeParents: true,
      },
      slideIndex: 0,
      reply: {
        type: "0",
        page: 1,
        limit: 20,
        loading: false,
        finished: false,
      },
      couponList: [],
      attrSelected: [],
      attrValueSelected: null,
      CartCount: 0,
      replyCount: 0,
      replyList: [],
      replyInfo: {
        stat: {},
      },
      count: 1,
      stock: 1,
      unique: "",
      guaranteeTitle: false,
      guaranteeInfo: false,
      tabIndex: 0,
      serviceInfo: {},
      translateContent: "",
    };
  },
  components: { FloatWindow, coupon },
  computed: {
    local() {
      return this.$i18n.locale;
    },
  },
  watch: {
    productAttr: {
      immediate: true,
      handler(attr) {
        if (attr.length) {
          attr.forEach((value, index) => {
            this.attrSelected[index] = value.attrValues.split(",")[0];
          });
        } else {
          // this.unique = this.productValue[""].id
          this.unique = ''
        }
      },
    },
    attrValueSelected(n) {
      if (n.image) {
        let sliderImage = this.productInfo.sliderImage.split(',')
        sliderImage[0] = n.image;
        this.slideIndex = 0;
      }
    },
    attrSelected: {
      immediate: true,
      handler(attr) {
        if (attr.length) {
          let name = attr.join(),
            value = this.productValue[name];
          if (value) {
            this.attrValueSelected = value;
            this.stock = value.stock;
            this.unique = value.id;
            this.count = this.productInfo.minQty;
          }
        } else {
          this.stock = this.productInfo.stock;
          // this.unique = this.productValue[""].id
          this.unique = ''
        }
      },
    },
    // local: {
    //   handler(val) {
    //     if (this.isJSON(this.productInfo.content)) {
    //       let content = JSON.parse(this.productInfo.content);
    //       switch (val) {
    //         case "en":
    //           this.translateContent = content.en;
    //           break;
    //         case "ru":
    //           this.translateContent = content.ru;
    //           break;
    //         case "kz":
    //           this.translateContent = content.kz;
    //           break;
    //         default:
    //           this.translateContent = content.zh;
    //           break;
    //       }
    //     } else {
    //       this.translateContent = this.productInfo.content;
    //     }
    //   },
    //   immediate: true,
    // },
  },

  async asyncData({ error, app, params, query }) {
    try {
      let [goods] = await Promise.all([
        app.$axios.get(`/api/front/product/detail/${params.id}`),
      ]);
      goods.data.productInfo.minQty = goods.data.productInfo.minQty || 1
      // if (process.env.NODE_ENV === "development") {
      //   let sliderImage = JSON.parse(goods.data.productInfo.sliderImage);
      //   console.log("productAttr", goods.data.productAttr);
      //   console.log("guaranteeList", goods.data.guaranteeList);
      //   console.log("merchantInfo", goods.data.merchantInfo);

      //   goods.data.productInfo.sliderImage = JSON.stringify([
      //     ...sliderImage,
      //     ...sliderImage,
      //     ...sliderImage,
      //     ...sliderImage,
      //   ]);
      //   return {
      //     productInfo: goods.data.productInfo,
      //     productAttr: goods.data.productAttr,
      //     productValue: goods.data.productValue,
      //     goodsList: goods.data.merchantInfo.proList,
      //     merchantInfo: goods.data.merchantInfo,
      //     id: params.id,
      //     userCollect: goods.data.userCollect,
      //     merId: goods.data.productInfo.merId,
      //     guaranteeList: goods.data.guaranteeList || [],
      //     count: goods.data.productInfo.minQty,
      //   };
      // }
      return {
        productInfo: goods.data.productInfo,
        productAttr: goods.data.productAttr,
        productValue: goods.data.productValue,
        goodsList: goods.data.merchantInfo.proList,
        merchantInfo: goods.data.merchantInfo,
        id: params.id,
        userCollect: goods.data.userCollect,
        merId: goods.data.productInfo.merId,
        guaranteeList: goods.data.guaranteeList || [],
        count: goods.data.productInfo.minQty,
      };
    } catch (e) {
      error({ statusCode: 500, msg: typeof e === "string" ? e : "系统繁忙" });
    }
  },
  head() {
    return {
      title: this.productInfo.storeName,
    };
  },
  beforeMount() {
    this.$store.dispatch("MerTypeList");
    this.getCoupons();
    this.getReplyConfig();
    this.getReply(1);
  },
  mounted() {
    if (this.$auth.loggedIn) {
      this.getCartCount();
    }
    this.getMerCustomer();
  },
  methods: {
    // 暂时过滤规格和默认两个汉字
    filterText(str) {
      if (str === "规格") {
        return this.$t("page.users.goodsCommentList.attribute");
      } else if (str === "默认") {
        return this.$t("page.goodsSearch.Default");
      } else {
        return str;
      }
    },
    call: Debounce(function () {
      this.comsys.chatConfig(this.serviceInfo);
    }),
    test(e) {
      console.log(this.attrSelected, e);
    },

    getMerCustomer() {
      this.$axios
        .get(`/api/front/merchant/customer/service/info/${this.merId}`)
        .then((res) => {
          this.serviceInfo = res.data;
        });
    },
    /**
     *
     * 购物车数量
     */
    getCartCount() {
      this.$axios
        .get(`/api/front/cart/count`, {
          params: {
            type: "sum",
            numType: true,
          },
        })
        .then((res) => {
          this.CartCount = res.data.count;
          this.$store.commit("cartNum", this.CartCount);
        });
    },
    buy: Debounce(function (type, event) {
      this.loading = true;
      if (!this.$auth.loggedIn) {
        this.$store.commit("isLogin", true);
        this.$store.commit("isTourists", true);
      } else {
        this.goCat(type);
      }
    }),
    goCat(num) {
      if (num === 1) {
        this.$axios
          .post("/api/front/cart/save", [
            {
              productId: parseFloat(this.$route.params.id),
              cartNum: parseFloat(this.count),
              productAttrUnique: parseFloat(this.unique),
            },
          ])
          .then((res) => {
            this.loading = false;
            this.$message.success(this.$t(`message.tips.shoppingSU`));
            this.getCartCount();
          })
          .catch((err) => {
            this.loading = false;
            this.$message.error(err);
          });
      } else {
        this.getPreOrder();
      }
    },
    getPreOrder: function () {
      getPreOrder(
        "buyNow",
        [
          {
            attrValueId: parseFloat(this.unique),
            productId: parseFloat(this.$route.params.id),
            productNum: parseFloat(this.count),
          },
        ],
        this
      );
      this.loading = false;
    },
    /**
     *
     * 进店逛逛
     */
    goStore() {
      goMerchant(this.merId, this);
    },
    /**
     *
     * 收藏 | 取消收藏
     */
    collect: Debounce(function () {
      if (!this.$auth.loggedIn) {
        this.$store.commit("isLogin", true);
      } else {
        followPro(this, this.userCollect, this.$route.params.id).then(() => {
          this.$set(this, "userCollect", !this.userCollect);
        });
      }
    }),

    swiperMouseover(index) {
      this.slideIndex = index;
    },
    tab(type) {
      this.tabIndex = type;
    },
    minus() {
      this.count--;
    },
    plus() {
      this.count++;
    },
    inputNum: Debounce(function () {
      this.count = parseInt(this.count) >= this.stock ? this.stock : this.count;
      this.count =
        parseInt(this.count) <= this.productInfo.minQty
          ? this.productInfo.minQty
          : this.count;
    }, 1000),
    goPage(menu, index) {
      this.$router.push({
        path: `${menu.link}`,
        query: { id: this.mer_id },
      });
    },
    /**
     *
     * 关注店铺
     */
    followToggle(id) {
      if (!this.$auth.loggedIn) {
        this.$store.commit("isLogin", true);
      } else {
        followMer(this, this.merchantInfo.isCollect, id).then(() => {
          this.$set(
            this.merchantInfo,
            "isCollect",
            !this.merchantInfo.isCollect
          );
        });
      }
    },
    /**
     *
     * 优惠卷
     */
    getCoupons() {
      let that = this;
      that.$axios
        .get(`/api/front/coupons`, {
          params: {
            merId: that.merId,
            productId: that.$route.params.id,
            useType: 2,
            page: 1,
            limit: 20,
          },
        })
        .then((res) => {
          console.log("couponList", res.data.list);
          that.couponList = res.data.list;
        })
        .catch((err) => {
          that.$message.error(err);
        });
    },
    replyTypeChange(type, count) {
      this.reply.type = type;
      this.reply.page = 1;
      this.replyList = [];
      this.getReply();
    },
    callPaginate(num) {
      this.reply.page = num;
      this.getReply(num);
    },
    /**
     *
     * 评论列表
     */
    getReply(num) {
      this.reply.loading = true;
      this.reply.page = num ? num : this.reply.page;
      this.$axios
        .get(`/api/front/product/reply/list/${this.$route.params.id}`, {
          params: {
            page: this.reply.page,
            limit: this.reply.limit,
            type: this.reply.type,
          },
        })
        .then((res) => {
          this.replyList = res.data.list;
          this.replyCount = res.data.total;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    /**
     *
     * 评论数量
     */
    getReplyConfig() {
      this.$axios
        .get(`/api/front/product/reply/config/${this.$route.params.id}`)
        .then((res) => {
          this.replyInfo = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    isJSON(str) {
      try {
        JSON.parse(str);
        return true;
      } catch (e) {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.test {
  border: 1px solid red;
}

@mixin head {
  // font-weight: 600;
}

@mixin head_text {
  color: $use-color-info;
  font-weight: 600;
}

@mixin normal_text_bold {
  color: $use-color-info-light-2;
  font-weight: 600;
}

@mixin normal_text {
  color: $use-color-info-light-2;
}

@mixin note_text {
  font-weight: normal;
  color: #666677;
}

@mixin flex_row {
  display: flex;
  flex-direction: row;
}

@mixin flex_row_center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.iconPrimary {
  color: $user--color-primary;
}

.iconInfo {
  color: $use-color-info;
}

.flex_row {
  @include flex_row;
}

.flex_row_center {
  @include flex_row_center;
}

.elinput_number {
  width: 160px;
  height: 36px;
  line-height: 36px;
}

.elinput_number > span.el-input-number__decrease {
  color: $user--color-primary;
  background-color: transparent;
  border-right: none;
  line-height: 36px;
}

.elinput_number > span.el-input-number__increase {
  color: $user--color-primary;
  background-color: transparent;
  border-left: none;
  line-height: 36px;
}

.elinput_number > .el-input > .el-input__inner {
  border-color: $user--color-primary;
  height: 36px;
  line-height: 36px;
  border-radius: 4px;
}

.elradio_group {
  @include flex_row;
  flex-flow: row wrap;

  .el-radio.is-bordered + .el-radio.is-bordered {
    margin-left: 0px;
  }

  .el-radio {
    border-radius: 4px;
    padding: 8px 25px 8px 12px;
    margin-right: 18px;
    min-height: 36px;
    // min-width: 150px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    ::v-deep .el-radio__input {
      display: none;
    }

    .el-radio__label {
      // padding: 5px;
    }
  }
}

.guarantee_tip_item {
  margin: 5px 0;

  .name {
    @include normal_text();
    font-size: 12px;
  }

  .info {
    @include note_text();
    font-size: 10px;
    line-height: 22px;
    padding-left: 20px;
  }

  .icon {
    color: $user--color-primary;
    font-size: 16px;
  }
}

.coupons-get {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}

.coupons-box {
  /*width: 467px;*/
}

.coupon_list {
  padding: 5px 10px 5px 30px;

  ::v-deep.list {
    flex-direction: column;
  }
}

.ml30 {
  margin-left: 30px;
}

.mb22 {
  margin-bottom: 22px;
}

.mb12 {
  margin-bottom: 12px;
}

.activity {
  height: 24px;
  padding: 0 10px;
  background: #00785e;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  position: relative;
  margin: 0 10px 5px 0;
}

.activity:before {
  content: " ";
  position: absolute;
  width: 3px;
  height: 5px;
  border-radius: 0 3px 3px 0;
  border: 1px solid #00785e;
  background-color: #fff !important;
  bottom: 50%;
  left: -2px;
  margin-bottom: -3px;
  border-left-color: #fff !important;
}

.activity:after {
  content: " ";
  position: absolute;
  width: 3px;
  height: 5px;
  border-radius: 3px 0 0 3px;
  border: 1px solid #00785e;
  background-color: #fff;
  right: -2px;
  bottom: 50%;
  margin-bottom: -3px;
  border-right-color: #fff !important;
}

.store-banner {
  width: 100%;
  height: 130px;

  img {
    object-fit: none;
    width: 100%;
    height: 100%;
  }
}

.menu-count {
  width: 100%;
  height: 40px;
  background: #dfdfdf;
}

.store-name {
  display: inline-block;
  width: 117px;
  position: relative;
  top: 11px;
  font-size: 16px;
  margin-bottom: 10px;
}

.user-menu {
  position: relative;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 1200px;
  margin: 0 auto;

  .category {
    position: absolute;
    top: 40px;
    left: 0;
    background-color: rgba(254, 248, 248, 0.96);
    width: 100%;
    padding: 40px 20px 20px;
    z-index: 10;

    .name {
      width: 130px;
      position: relative;
      padding-right: 20px;
      margin-right: 30px;
      cursor: pointer;

      .iconfont {
        font-size: 10px;
        position: absolute;
        right: 0;
        top: 3px;
        color: #282828;
      }
    }

    .sortCon {
      width: 1000px;

      .sub-item {
        margin: 0 15px 15px;
        color: #666666;
        cursor: pointer;
      }
    }

    .erSort {
      align-items: center;
    }

    .item {
      margin-bottom: 20px;
      align-items: baseline;
    }

    .moreBtn {
      color: #282828;
      font-size: 12px;
      width: 100px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 13px;
      border: 1px solid #666666;
    }
  }

  .menu-main {
    width: 300px;
    height: 40px;
    -webkit-justify-content: space-between;
    justify-content: space-between;

    .menu-item {
      display: inline-block;
      height: 26px;
      line-height: 26px;
      color: #282828;
      padding: 0 10px;
      cursor: pointer;

      &.active {
        color: #fff;
        background: #282828;
        color: #fff;
        border-radius: 15px;
      }
    }
  }

  .menu-search {
    width: 220px;
    height: 24px;
    background-color: #fff;
    border-radius: 17px;

    .text {
      width: 175px;
    }

    input {
      border: none;
      height: 24px;
      line-height: 24px;
      color: #999999;
      padding: 0 15px;
      border-radius: 17px 0 0 17px;

      &:focus {
        border: none;
        outline: none;
      }
    }

    .bnt {
      width: 44px;
      background-color: #282828;
      color: #fff;
      border-radius: 0 17px 17px 0;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
    }
  }
}

.product_content .title {
  text-align: center;
  font-size: 18px;
  margin: 5px 0;
}

.dropdown-box {
  ::v-deep.el-dropdown-menu {
    z-index: 10 !important;
  }
}

.goods-detail {
  margin-top: 16px;
  background-color: #fff;
  border-radius: 8px;

  .goods-main {
    flex: 1;
    min-width: 0;
  }

  .carousel {
    width: 350px;

    .preview {
      display: block;
      width: 349px;
      height: 349px;
      border-radius: 8px;
    }

    .swiper-container {
      // padding-right: 25px;
      // padding-left: 25px;
      margin-top: 18px;

      .swiper-button-prev,
      .swiper-button-next {
        top: 0;
        width: 25px;
        height: 100%;
        margin-top: 0;
        background-color: rgba(0, 0, 0, 0.3);
        background-size: 12px 22px;
      }

      .swiper-button-prev {
        left: 0;
      }

      .swiper-button-next {
        right: 0;
      }

      .swiper-slide {
        width: 79px;
        height: 79px;

        .el-image {
          width: 79px;
          height: 79px;
          border-radius: 4px;
        }

        // border: 2px solid transparent;
        // box-sizing: border-box;
        // overflow: hidden;
        cursor: pointer;

        &.on {
          border-color: #00785e;
        }

        ~ .swiper-slide {
          margin-left: 11px;
        }

        img {
          display: block;
          width: 70px;
          height: 70px;
        }
      }
    }

    .btn {
      margin-right: 30px;
      font-size: 12px;
      color: #4b4b4b;
      cursor: pointer;
      position: relative;

      .qrcode1 {
        display: none;
        box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.08);
        background: #fff;
        padding: 6px;
        position: relative;
        width: 100px;

        img {
          width: 100%;
        }

        &.contactService {
          position: absolute;
          left: 50%;
          top: 25px;
          z-index: 10;
          width: 100px;
          height: 100px;
          margin-left: -50px;
        }
      }
    }

    .contactBtn:hover {
      .qrcode1 {
        display: inline;
      }
    }

    .iconfont {
      margin-right: 6px;
      font-size: 14px;
      color: #00785e;
    }
  }

  .text-wrapper {
    flex: 1;
    min-width: 0;
    margin-left: 32px;
    padding-top: 12px;
    width: 756px;
    min-height: 446px;

    .title_view {
      .title {
        @include head_text;
        // font-weight: bold;
        font-size: 28px;
      }

      .extra {
        @include normal_text_bold;
        min-width: 100px;
        font-size: 14px;
        // font-weight: bold;
        line-height: normal;
        text-align: right;
        letter-spacing: 0px;
      }

      // font-size: 20px;
      // line-height: 28px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .money_show {
      margin-top: 16px;
      @include flex_row_center;

      .price_label {
        @include head_text;
        font-size: 16px;
      }

      .statistic {
        @include head;
        font-size: 20px;
      }

      .specifications {
        @include note_text;
        font-size: 14px;
      }
    }

    .attr_show {
      margin-top: 20px;

      .attr_view {
        .label {
          @include head_text;
          font-size: 16px;
        }

        .elradio_group {
          margin-top: 12px;

          .itemicon {
            position: absolute;
            top: -1px;
            right: -1px;
            font-size: 14px;
          }
        }
      }
    }

    .number_show {
      margin-top: 4px;

      .label {
        @include head_text;
        font-size: 16px;
      }

      .input_number {
        margin-top: 12px;
        @include flex_row_center;
        align-items: flex-end;
      }

      .note {
        @include note_text;
        font-size: 14px;
        margin-left: 16px;
      }
    }

    .guarantee_show {
      margin-top: 24px;

      .label {
        @include head_text;
        font-size: 16px;
      }

      .guarantee_view {
        @include flex_row();

        .item {
          @include note_text;
          @include flex_row_center();
          margin: 12px 20px 12px 0px;
          font-size: 14px;
        }
      }
    }

    .button_show {
      margin-top: 20px;
      @include flex_row();
      flex-flow: row wrap;

      button.el-button {
        height: 50px;
        @include flex_row_center();

        span {
          @include head;
          font-size: 16px;
        }

        .icon {
          font-size: 24px;
        }
      }

      .normal {
        span {
          color: $use-color-info;
        }
      }
    }
  }

  .bottom_show {
    margin-top: 32px;

    @include flex_row();
  }

  .store_show {
    border-radius: 8px;
    width: 350px;
    padding: 16px;

    .store_header {
      @include flex_row();

      .store_image {
        width: 88px;
        height: 88px;
        border-radius: 8px;
      }

      .store_info {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 16px;
        padding-top: 8px;

        .store_name {
          @include head_text();
          font-size: 18px;
          // flex: 1;
          overflow-y: auto;
          // margin-bottom: 5px;
        }
        .store_code {
          font-size: 16px;
          color: #666;
          margin-bottom: auto;
        }

        .store_rate {
          font-size: 14px;
          letter-spacing: 0px;

          .iconfont2 {
            margin-right: 5px;
          }

          .full {
            color: transparent;
            background-image: linear-gradient(
              180deg,
              #ffcc2a -36%,
              #ee983a 75%,
              #faa932 140%
            );
            background-clip: text;
          }

          .none {
            color: #d9dfe7;
          }
        }
      }
    }

    .store_tag {
      margin-top: 24px;
      @include flex_row_center();
      flex-flow: row wrap;
      justify-content: space-between;

      .tag {
        text-align: center;
        color: $user--color-primary;
        padding: 8px;
        width: 47%;
        background-color: $use-color-success-a10;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .store_function {
      .store_customer {
        padding: 14px 0;
        @include flex_row_center();

        justify-content: space-between;
        border-bottom: 1px solid $use-color-line;

        .text {
          font-size: 14px;
          margin: 0 12px;
          flex: 1;
          color: $use-color-info-light-2;
        }

        .icon {
          font-size: 20px;
          color: $use-color-info;
        }

        .arrow {
          color: $use-color-line;
        }
      }

      .store_qualification {
        padding: 14px 0;
        @include flex_row_center();
        justify-content: space-between;
        border-bottom: 1px solid $use-color-line;

        .text {
          font-size: 14px;

          margin: 0 12px;
          flex: 1;
          color: $use-color-info-light-2;
        }

        .icon {
          font-size: 20px;

          color: $use-color-info;
        }

        .arrow {
          color: $use-color-line;
        }
      }
    }

    .store_link {
      margin-top: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      button.el-button {
        width: 100%;
        margin-top: 16px;
        margin-left: 0px;

        height: 50px;
        @include flex_row_center();
        justify-content: center;
        align-items: center;

        span {
          @include head;
          font-size: 16px;
        }

        .text {
          color: $use-color-info;
        }

        .icon {
          font-size: 24px;
        }
      }
    }
  }

  .recommend_show {
    margin-top: 35px;
    width: 350px;
    @include flex_row();
    flex-flow: row wrap;
    justify-content: space-between;

    .item {
      width: 160px;

      .inner {
        padding: 12px 8px;

        .recommend_image {
          width: 142px;
          height: 142px;
          border-radius: 8px;
        }

        .name {
          @include normal_text_bold();
          margin-top: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          /* 设置宽度和高度 */
          width: 140px;
        }

        .price {
          margin-top: 4px;
          @include head();
        }
      }
    }
  }
  .detail_show {
    flex: 1;
    margin-left: 32px;
    margin-top: 32px;

    .detail_tab {
      height: 100%;
      display: flex;
      flex-direction: column;

      .el-tabs__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;

        .el-tab-pane {
          flex: 1;
          display: flex;
          flex-direction: column;
          position: relative;
        }

        .comment_show {
          flex: 1;
          display: flex;
          flex-direction: column;
          position: relative;

          .comment_rate {
            margin-top: 25px;
            @include flex_row_center();
            @include normal_text();
            font-size: 16px;

            .rate {
              margin: 0 16px;
              font-size: 14px;
              letter-spacing: 0px;

              .iconfont2 {
                margin-right: 5px;
              }

              .full {
                color: transparent;
                background-image: linear-gradient(
                  180deg,
                  #ffcc2a -36%,
                  #ee983a 75%,
                  #faa932 140%
                );
                background-clip: text;
              }

              .none {
                color: #d9dfe7;
              }
            }

            .percentage {
              font-size: 14px;
            }
          }

          .comment_view {
            margin-top: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;

            .comment_list {
              flex: 1;

              overflow-y: auto;

              .commend_item {
                margin-bottom: 10px;
                @include flex_row();

                .image {
                  .commend_item_image {
                    border-radius: 48px;
                    height: 48px;
                    width: 48px;
                  }
                }

                .commend_item_info {
                  flex: 1;
                  margin-left: 16px;

                  .commend_item_rate {
                    @include flex_row_center();

                    .icon {
                      font-size: 12px;
                      letter-spacing: 0px;
                      margin-right: 8px;
                      color: transparent;
                      background-image: linear-gradient(
                        180deg,
                        #ffcc2a -36%,
                        #ee983a 75%,
                        #faa932 140%
                      );
                      background-clip: text;
                    }

                    .star {
                      @include normal_text_bold();
                      font-size: 14px;
                    }

                    .time {
                      @include note_text();
                      font-size: 14px;
                      margin-left: 8px;
                    }
                  }

                  .name {
                    @include normal_text_bold();
                    margin: 5px 0;
                    font-size: 16px;
                  }

                  .comment {
                    @include note_text();
                    font-size: 14px;
                    // word-break: break-all;
                  }

                  .images {
                    margin-top: 8px;
                    @include flex_row();
                    flex-flow: row wrap;

                    .image {
                      margin: 0 10px 10px 0;
                      border-radius: 8px;
                    }
                  }

                  .reply {
                    margin-top: 8px;

                    @include note_text();
                    font-size: 14px;
                  }
                }
              }
            }

            .page {
              display: flex;
              flex-flow: row-reverse;
            }
          }
        }
      }
    }
  }

  // .el-pagination {
  //   padding: 0;
  //   border: 1px solid #cccccc;

  //   ::v-deep button {
  //     width: 78px;
  //     height: 38px;
  //     padding: 0;
  //     font-size: 15px;
  //     color: #707070;

  //     &.btn-prev {
  //       border-right: 1px solid #cccccc;
  //     }

  //     &.btn-next {
  //       border-left: 1px solid #cccccc;
  //     }
  //   }

  //   ::v-deep li {
  //     width: 38px;
  //     height: 38px;
  //     padding: 0;
  //     font-weight: normal;
  //     font-size: 15px;
  //     line-height: 38px;
  //     color: #707070;

  //     ~li {
  //       border-left: 1px solid #cccccc;
  //     }

  //     &.active {
  //       background-color: #00785E;
  //       color: #ffffff;
  //     }
  //   }
  // }

  .nothing {
    margin-top: 100px;
    font-size: 16px;
    text-align: center;
    color: #999999;

    img {
      margin: 0 auto;
    }
  }
}

.store-favorites {
  margin-top: 20px;

  .collection {
    width: 180px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #333333;
    border: 1px solid #c8c8c8;
    border-radius: 2px;
    background: #fff;

    &.care {
      color: #00785e;
      border-color: #00785e;
    }
  }
}

.page_container {
  padding: 37px 32px 15px;
}

.normal_border {
  border: 1px solid #d9dfe7;
}
.float_left_show {
  margin-top: 32px;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 1px;
}
</style>
